// 文章列表
// 1. 请求参数对象配置
// var q = {
//     pagenum: 1, // 页码 - 默认请求第一页数据
//     pagesize: 2, // 每页需要几条数据 - 默认2条
//     cate_id: '', // 文章分类ID-不传后台会返回所有
//     state: '' // 文章的状态(已发布/草稿)这2个中文的状态(没有数字对应, 直接传中文作为参数) - 不传后台也会返回所有
// }
// var total = 0; // 保存一共有多少条数据

// // 2. 获取数据 - 铺设页面
// function load() {
//     getArticleAPI(q, res => {
//         $(".layui-table tbody").empty();
//         var { data: arr } = res.data;

//         // total, 保存的是这个条件下有多少条数据
//         total = res.data['total'];
//         // 铺设分页
//         setPage();



//         if (arr.length == 0) {
//             layer.msg("暂无数据");
//             return;
//         }

//         arr.forEach(obj => {
//             var theTr = `<tr>
//                             <td>${obj.title}</td>
//                             <td>${obj.cate_name}</td>
//                             <td>${formatDate(obj.pub_date)}</td>
//                             <td>${obj.state}</td>
//                             <th>
//                             <a href="/iframe/article/publisher/publisher.html?id=${obj.Id}" class="layui-btn layui-btn-xs">编辑</a>
//                             <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger del">删除</button>
//                             </th>
//                         </tr>`
//             $(".layui-table tbody").append(theTr);
//         })




//     })
// }
// load();

// // 3. 获取文章类型
// getCategoryAPI({}, res => {
//     var {data: arr} = res.data;
//     // 铺设下拉菜单
//     // 默认显示个所有分类
//     $(".search select[name=category]").append(`<option value="">所有分类</option>`);
//     arr.forEach(obj => {
//         var theOption = `<option value="${obj['Id']}">${obj['name']}</option>`;
//         $(".search select[name=category]").append(theOption);
//         // 这里要注意layui的标签, 要让layui重新监测下里面的option才会渲染出来
//         layui.form.render();
//     })
// })

// // 4. 监听search表单提交
// $(".search").on("submit", function(ev){
//     ev.preventDefault();
//     // 收集用户选择的信息
//     var cateId = $(".search select[name=category]").val();
//     var state = $(".search select[name=state]").val();
//     // 修改参数q, 然后调用load - 请求新的数据 - 刷新页面
//     q['cate_id'] = cateId;
//     q['state'] = state;

//     // 回到第一页
//     q['pagenum'] = 1;
//     load();
// })

// // 5. 渲染分页的方法
// function setPage(){
//     var laypage = layui.laypage;
//     //执行一个laypage实例
//     laypage.render({
//       elem: 'page', //注意，这里的 page 是 ID，不用加 # 号
//       count: total, //数据总数，从服务端得到
//       limit: q.pagesize, // 每页显示几条
//       curr: q.pagenum, // 当前第几页高亮
//       // (1): 只要laypage.render()被调用,  默认第一个得点击下, 所以jump就被触发了
//       // (2): 方式2触发jump, 就是用户点击了页码, 直接触发jump函数执行
//       // 防止死循环: first的值为true, 证明是方式1触发的, 那我们就不能去load() -> setPage -> laypage.render()了
//       jump: function(obj, first){ 
//           if (!first) {
//             q.pagenum = obj.curr; // 用户点击的第几页
//             q.pagesize = obj.limit; // 点击的一页要多少条
//             load();
//           }
//       },
//       // 自定义分页器 - 增加额外的东西
//       layout: ["count", "limit", "prev", "page", "next", "skip"],
//       // 下拉菜单里显示的数据
//       limits: [2, 3, 5, 10, 20, 50]
//     });
// }

// // 6. 监听删除按钮点击
// $(".layui-table tbody").on("click", ".del", function(ev){
//     layer.confirm("确定退出?", { icon: 3, title: "提示" }, () => {
//         delArticleAPI({id: $(ev.target).attr("myid")}, () => {
//             q.pagenum = 1; // 回到第一页刷新
//             load();
//         })
//     });
// })
var allCount = 0; //保存的是后台现有的文章总数
let q = {
    pagenum: 1, //页数
    pagesize: 2, //每页‘要’多少条数据
    cate_id: '',//分类id（可选，可以给值也可以不给值）
    state: '' //（已发布，草稿）只能是这两个值
}
//1、获取文章数据列表
function load() {

    artListAPI(q, res => {
        let arr = res.data.data;
        allCount = res.data.total;
        $('.layui-table tbody').empty();
        arr.forEach(obj => {
            var theTr = `
            <tr>
                            <td>${obj.title}</td>
                            <td>${obj.cate_name}</td>
                            <td>${(obj.pub_date)}</td>
                            <td>${obj.state}</td>
                            <th>
                            <a href="/iframe/article/publisher/publisher.html?id=${obj.Id}" class="layui-btn layui-btn-xs">编辑</a>
                            <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger del">删除</button>
                            </th>
                        </tr>
            `
            $('.layui-table tbody').append(theTr);
        })
        setPage();
    })
}
load();

//2、分页的铺设
function setPage() {
    var laypage = layui.laypage;
    laypage.render({
        elem: 'page',
        count: allCount,//数据总数从服务端得到
        limit: q.pagesize,
        limits: [2, 3, 4, 5],
        layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
        curr: q.pagenum,  //curr起始页
        jump: function (obj, first) {
            //obj包含了当前分页的所有参数，比如：
            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            console.log(obj.limit); //得到每页显示的条数

            //首次不执行
            if (!first) {
                q.pagenum = obj.curr;
                q.pagesize = obj.limit;
                load();
            }
        }
    });
}
//3、类别数据获取和铺设
cateListAPI({}, res => {
    //提取数据
    let arr = res.data.data;
    $('select[name=category]').append(` <option value="" lay-verify="cate">所有分类</option>
`)
    arr.forEach(obj => {
        var theOption = ` <option value="${obj.Id}" lay-verify="cate">${obj.name}</option>
`;
        $('select[name=category]').append(theOption);
    })
    // 让layui刷新一下form表单
    layui.form.render('select', 'category');
})
//4、分类数据回来了，再绑定筛选表单的submit事件
$('.search ').on('submit', e => {
    e.preventDefault();
    q.cate_id = $('select[name=category]').val();
    q.state = $('select[name=state]').val();
    load();
})

//5、删除
$('.layui-table tbody').on('clcik', '.del', function () {
    artDelAPI($(this).attr('maid'), res => {
        load();
    })
})







